import { Fab, Zoom } from "@mui/material";
import React, { useEffect, useState } from "react";
// import "./TopJumper.scss";
import { useTheme } from "@mui/material/styles";
import UpIcon from "@mui/icons-material/KeyboardArrowUp";
import { green } from "@mui/material/colors";

function GotoTop() {
  const [show, switchShow] = useState(false); // 设置状态

  useEffect(
    () => {
      const listener = () => {
        switchShow(window.scrollY > 300);
      };
      document.addEventListener("scroll", listener);
      return () => document.removeEventListener("scroll", listener); // 组件销毁后，取消监听
    },
    [show] /* 依赖记得给上，否则死循环 */
  );

  const theme = useTheme();
  const transitionDuration = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen,
  };
  const fabGreenStyle = {
    // color: "common.white",
    // bgcolor: green[500],
    // "&:hover": {
    //   bgcolor: green[600],
    // },
    position: "absolute",
    bottom: 16,
    right: 16,
  };
  return (
    <Zoom
      //   key={fab.color}
      //   sx={{
      //     position: "fixed",
      //   }}
      in={show}
      timeout={transitionDuration}
      style={{
        transitionDelay: `${show ? transitionDuration.exit : 0}ms`,
      }}
      unmountOnExit
    >
      <Fab
        sx={{ ...fabGreenStyle, position: "fixed" }}
        aria-label="Expand"
        onClick={() => window.scrollTo(0, 0)}
        color="primary"
      >
        <UpIcon />
      </Fab>
    </Zoom>
  );
}

export default GotoTop;
